<template>
    <div class="wrap">
        <div class="main">
  <router-view></router-view>
        </div>
      
        <div class="footer">
         <Footer :footList='footList'></Footer>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Footer from '../../components/footer.vue'
@Component({
    components:{
   Footer
    }
})
export default class Home extends Vue {
    private footList:any[]=[
        {
        path: '/home/ind',
        name: '首页',  
        },
          {
        path: '/home/lun',
        name: '论坛',  
        },
          {
        path: '/home/car',
        name: '选车',  
        },
          {
        path: '/home/beji',
        name: '北京',  
        },
          {
        path: '/home/my',
        name: '我的',  
        },
    ]
}
</script>

<style lang="scss" >
 *{
     margin: 0;
     padding: 0;
     list-style: none;
     text-decoration: none;
     box-sizing: border-box;
 }
 html,body,#app{
     width: 100%;
     height: 100%;
 }
 .wrap{
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     overflow: hidden;
 }
 .main{
    overflow: scroll;
     flex: 1;
 }
 .footer{
     width: 100%;
     height: 30px;
     background: skyblue;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 20px;
 }
</style>